<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>交易记录管理</title>
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <style>
        body {
            background-color: #f8f9fa;
            font-size: 0.875rem; /* 14px */
        }
        .navbar {
            box-shadow: 0 2px 4px rgba(0,0,0,.1);
            font-size: 0.875rem; /* 14px */
        }
        .card {
            border: none;
            border-radius: 10px;
            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
            transition: box-shadow 0.3s ease-in-out;
            font-size: 0.875rem; /* 14px */
        }
        .card:hover {
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
        }
        .card-header {
            background-color: #fff;
            border-bottom: 1px solid rgba(0, 0, 0, 0.125);
            font-weight: 600;
            border-top-left-radius: 10px !important;
            border-top-right-radius: 10px !important;
        }
        .table {
            font-size: 0.8125rem; /* 13px */
        }
        .table th {
            border-top: none;
            font-weight: 600;
        }
        .btn {
            font-size: 0.8125rem; /* 13px */
        }
        .btn-primary {
            background-color: #0d6efd;
            border-color: #0d6efd;
        }
        .btn-primary:hover {
            background-color: #0b5ed7;
            border-color: #0a58ca;
        }
        .btn-info {
            background-color: #0dcaf0;
            border-color: #0dcaf0;
        }
        .btn-info:hover {
            background-color: #31d2f2;
            border-color: #25cff2;
        }
        .pagination .page-link {
            color: #0d6efd;
            font-size: 0.8125rem; /* 13px */
        }
        .pagination .page-item.active .page-link {
            background-color: #0d6efd;
            border-color: #0d6efd;
        }
        .modal-content {
            border-radius: 10px;
            border: none;
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
            font-size: 0.875rem; /* 14px */
        }
        .modal-header {
            background-color: #f8f9fa;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
        }
        h2 {
            color: #2c3e50;
            font-weight: 600;
            font-size: 1.25rem; /* 20px */
        }
        .form-control, .form-select {
            border-radius: 8px;
            font-size: 0.875rem; /* 14px */
        }
        .form-label {
            font-size: 0.8125rem; /* 13px */
        }
        .transaction-buy {
            color: #198754;
            font-weight: bold;
        }
        .transaction-sell {
            color: #dc3545;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand" href="index.html">
                <i class="bi bi-bank"></i> 个人投资管理系统
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">

                    <li class="nav-item">
                        <a class="nav-link" href="fund.html">标的管理</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="portfolio.html">投资组合</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="transaction.html">交易记录</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="investmentGoal.html">投资目标</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="investmentDiary.html">投资日记</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="riskAssessment.html">风险评估</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="taxCalculation.html">税务计算</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container mt-5">
        
        <!-- 查询条件 -->
        <div class="card mb-4">
            <div class="card-header">查询条件</div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-3 mb-3">
                        <input type="text" class="form-control" id="searchFundCode" placeholder="请输入标的代码">
                    </div>
                    <div class="col-md-3 mb-3">
                        <select class="form-select" id="searchTransactionType">
                            <option value="">全部</option>
                            <option value="1">买入</option>
                            <option value="2">卖出</option>
                        </select>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12 d-flex justify-content-center">
                        <button class="btn btn-primary me-2" id="fetchTransactionsButton">
                            <i class="bi bi-search"></i> 查询
                        </button>
                        <button class="btn btn-primary" id="addTransactionButton" data-bs-toggle="modal" data-bs-target="#addTransactionModal">
                            <i class="bi bi-plus-circle"></i> 新增交易
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 表格 -->
        <div class="card mb-4">
            <div class="card-body">
                <div class="table-responsive">
                    <table id="transactionTable" class="table table-striped table-hover">
                        <thead>
                            <tr>
                                <th>标的代码</th>
                                <th>标的名称</th>
                                <th>交易类型</th>
                                <th>份额</th>
                                <th>价格</th>
                                <th>手续费</th>
                                <th>交易金额</th>
                                <th>交易时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody id="transactionTableBody">
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- 分页 -->
        <div id="pagination" class="d-flex justify-content-between">
            <div>
                <nav aria-label="Page navigation">
                    <ul class="pagination">
                        <li class="page-item">
                            <select class="form-select" id="itemsPerPage">
                                <option value="10" selected>10</option>
                                <option value="20">20</option>
                                <option value="30">30</option>
                                <option value="50">50</option>
                                <option value="100">100</option>
                            </select>
                        </li>
                        <li class="page-item" id="prevPage">
                            <a class="page-link" tabindex="-1" aria-disabled="true" id="pPage">上一页</a>
                        </li>
                        <li class="page-item">
                            <span class="page-link">
                                第 <span id="currentPage">1</span> 页 / 共 <span id="totalPages">1</span> 页
                            </span>
                        </li>
                        <li class="page-item" id="nextPage">
                            <a class="page-link" id="nPage">下一页</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>

    <!-- 新增交易模态框 -->
    <div class="modal fade" id="addTransactionModal" tabindex="-1" aria-labelledby="addTransactionModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addTransactionModalLabel">新增交易记录</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="addTransactionForm">
                        <div class="mb-3">
                            <label for="addFundCode" class="form-label">标的代码</label>
                            <input type="text" class="form-control" id="addFundCode" required>
                            <div id="fundSuggestions" class="list-group mt-1" style="max-height: 200px; overflow-y: auto; position: absolute; z-index: 1000; width: 90%; display: none;"></div>
                        </div>
                        <div class="mb-3">
                            <label for="addFundName" class="form-label">标的名称</label>
                            <input type="text" class="form-control readonly-field" id="addFundName" readonly required>
                        </div>
                        <div class="mb-3">
                            <label for="addTransactionType" class="form-label">交易类型</label>
                            <select class="form-select" id="addTransactionType" required>
                                <option value="">请选择</option>
                                <option value="1">买入</option>
                                <option value="2">卖出</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="addShares" class="form-label">份额</label>
                            <input type="number" class="form-control" id="addShares" step="0.01" required>
                        </div>
                        <div class="mb-3">
                            <label for="addPrice" class="form-label">价格</label>
                            <input type="number" class="form-control" id="addPrice" step="0.0001" required>
                        </div>
                        <div class="mb-3">
                            <label for="addFee" class="form-label">手续费</label>
                            <input type="number" class="form-control" id="addFee" step="0.01" value="0">
                        </div>
                        <div class="mb-3">
                            <label for="addTransactionTime" class="form-label">交易时间</label>
                            <input type="date" class="form-control" id="addTransactionTime" required>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="bi bi-x-circle"></i> 取消
                    </button>
                    <button type="button" class="btn btn-primary" id="saveAddTransaction">
                        <i class="bi bi-save"></i> 保存
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 编辑交易模态框 -->
    <div class="modal fade" id="editTransactionModal" tabindex="-1" aria-labelledby="editTransactionModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="editTransactionModalLabel">编辑交易记录</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="editTransactionForm">
                        <input type="hidden" id="editTransactionId">
                        <div class="mb-3">
                            <label for="editFundCode" class="form-label">标的代码</label>
                            <input type="text" class="form-control readonly-field" id="editFundCode" readonly>
                        </div>
                        <div class="mb-3">
                            <label for="editFundName" class="form-label">标的名称</label>
                            <input type="text" class="form-control" id="editFundName" required>
                        </div>
                        <div class="mb-3">
                            <label for="editTransactionType" class="form-label">交易类型</label>
                            <select class="form-select" id="editTransactionType" required>
                                <option value="1">买入</option>
                                <option value="2">卖出</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="editShares" class="form-label">份额</label>
                            <input type="number" class="form-control" id="editShares" step="0.01" required>
                        </div>
                        <div class="mb-3">
                            <label for="editPrice" class="form-label">价格</label>
                            <input type="number" class="form-control" id="editPrice" step="0.0001" required>
                        </div>
                        <div class="mb-3">
                            <label for="editFee" class="form-label">手续费</label>
                            <input type="number" class="form-control" id="editFee" step="0.01">
                        </div>
                        <div class="mb-3">
                            <label for="editTransactionTime" class="form-label">交易时间</label>
                            <input type="date" class="form-control" id="editTransactionTime" required>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="bi bi-x-circle"></i> 取消
                    </button>
                    <button type="button" class="btn btn-primary" id="saveEditTransaction">
                        <i class="bi bi-save"></i> 保存
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 自定义模态框 -->
    <div class="modal fade" id="customAlertModal" tabindex="-1" aria-labelledby="customAlertModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="customAlertModalLabel">提示</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" id="customAlertMessage">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-bs-dismiss="modal">
                        <i class="bi bi-check-circle"></i> 确定
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="transaction.js?v=1.0.0"></script>
</body>
</html>